<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --LB: #3AE;
            --TC: #FAFAFA;
            --TAG: #F5F5FC;
            --OL00: #A3A3A39A;
            --OL05: #EB45379A;
            --OL92: #FAC2309A;
            --OL95: #4286F39A;
            --OL98: #55AF7B9A;

            --SMBR: 4px;

            --PGSP: #3AA6;
        }

        button {
            margin: 0 .5em;
            padding: 6px 0.5em;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bolder;
            border: none;
            border-radius: var(--SMBR);
            color: var(--TC);
            background-color: var(--LB);
        }

        header {
            position: sticky;
            display: flex;
            top: 10px;
            z-index: 100;
        }

        .tabs {
            display: flex;
        }

        a.tab,
        a.tab:visited {
            text-decoration: none;
        }

        .tab>div {
            margin: 2px;
            padding: 4px 2em;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background-color: var(--TAG);
            color: var(--LB);
            text-decoration: none;
        }

        .tab:hover>div {
            background-color: var(--LB);
            color: var(--TC);
        }

        .Notice {
            padding-left: 2em;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1.5em;
        }


        .page {
            display: none;
            position: relative;
        }

        .page:target {
            display: block;
        }

        .page-splitter {
            margin-top: 4em;
            min-height: 600px;
            width: .2em;
            background-color: var(--PGSP);
        }

        .right-th {
            display: flex;
            position: sticky;
            margin: .5em;
            /* box-sizing:border-box; */
            padding: 0 .5em .2em .5em;
            border-bottom: .2em solid var(--PGSP);
        }

        .right-td {
            display: block;
            margin: .2em;
            min-width: 15em;
        }

        .right-td select {
            width: 10em;
            margin: 0;
            padding: .2em;
            border: none;
            font-size: larger;
        }

        .right-td input[type="number"] {
            border: none;
            margin: 0;
            padding: 0;
            font-size: larger;
            text-align: center;
        }

        .right-td span {
            font-size: larger;
        }

        /* =====================  section 123 ====================== */
        .pg1-lt-li,
        .pg3-lt-li {
            margin: 1em;
        }

        #pg1-lt label,
        #pg3-lt label {
            margin-right: 0.5em;
        }

        #pg1-lt input,
        #pg3-lt input {
            padding: 4px;
            border-style: solid;
            border-radius: 4px;
            border-color: var(--LB);
        }


        div#pg1-two,
        div#pg2-two,
        div#pg3-two {
            display: flex;
        }

        div#pg1-lt,
        div#pg1-rt,
        div#pg3-lt,
        div#pg3-rt {
            margin: 2em 1em;
        }

        /* =====================  section 1 ====================== */

        #pg1-lt {
            width: 300px;
            max-height: 20em;
            top: 3em;
            position: sticky;
        }

        #pg1-rt {
            padding-left: 2em;
        }

        /* =====================  section 2 ====================== */


        /* =====================  section 3 ====================== */

        #pg3-lt {
            max-height: 20em;
            top: 3em;
            position: sticky;
        }
    </style>
</head>

<body>

    <body>
        <header>
            <div class="tabs">
                <a class="tab" href="#pg1">
                    <div>录入</div>
                </a>
                <a class="tab" href="#pg2">
                    <div>计算</div>
                </a>
                <a class="tab" href="#pg3">
                    <div>配额</div>
                </a>
            </div>
            <div class="Notice" id="Notice">
                说明:该页面不兼容IE浏览器
            </div>
        </header>
        <main>
            <!-- ====================================================== section 1 ===================================================== -->
            <section class="page" id="pg1">
                <div id="pg1-two">

                    <!--  ========== left side ====================  -->
                    <div id="pg1-lt">
                        <div>
                            <div class="pg1-lt-li"><label for="xm">姓名</label><input type="text" id="pg1-lt-xm"></div>
                            <div class="pg1-lt-li"><label for="zl">类型</label><input list="zl-list" id="pg1-lt-zl"></div>
                            <div class="pg1-lt-li"><label for="je">金额</label><input type="number" id="pg1-lt-je"></div>
                            <div class="pg1-lt-li">
                                <button id="pg1-lt-billAdd">录入</button>
                                <button id="pg1-lt-billLoad">批量录入</button>
                                <button id="pg1-lt-billClear">清除右侧</button>
                            </div>

                            <div class="pg1-lt-li">
                                <textarea rows="20" cols="32" id="pg1-lt-billLines"
                                    placeholder="每行数据请按[姓名  类型  金额]的顺序排列"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="page-splitter"></div> -->
                    <!-- ========= right side ======================= -->
                    <div id="pg1-rt">
                        <div class="right-th">
                            <div class="right-td">
                                <select name="" id="">
                                    <option>姓名</option>
                                </select>
                            </div>
                            <div class="right-td">
                                <select name="" id="" placeholder="aaaa">
                                    <option>类型</option>
                                    <option value="92">92</option>
                                    <option value="98">98</option>
                                    <option value="95">95</option>
                                    <option value="柴油">柴油</option>
                                </select>
                            </div>
                            <div class="right-td">
                                <input type="number" max="100" min="0" size="4" value="0">
                                <span>≤ 金额 ≤</span>
                                <input type="number" max="100" min="0" size="4" value="999">
                            </div>
                        </div>
                        <div id="pg1-rt-ul">
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- ====================================================== section 2 ===================================================== -->
            <section class="page" id="pg2">
                <style>
                    #pg2-up,
                    #pg2-down {
                        width: 100%;
                        padding: 0.5em;
                        overflow: visible auto;
                        position: absolute;
                        z-index: 20;
                        display: block;
                        /* display: none; */
                    }

                    #pg2-up {
                        top: 0;
                        height: 18em;
                        background: #F0F9;
                    }

                    #pg2-down {
                        top: 19em;
                        height: 28em;
                        background: #FF09;
                    }

                    #pg2-calc {
                        display: flex;
                        position: relative;
                        flex-wrap: wrap;
                        width: 100%;
                        height: 46em;
                        padding: 1em;
                        background: #0F06;
                        overflow: hidden auto;
                    }

                    #pg2-pub {
                        display: flex;
                        width: 75em;
                        height: 4em;
                        margin: auto;
                        padding: .5em;
                        background: #00F6;
                    }
                </style>

                <div id="pg2-up">

                </div>
                <div id="pg2-down"></div>
                <div id="pg2-calc"></div>
                <div id="pg2-pub"></div>

            </section>
            <!-- ====================================================== section 3 ===================================================== -->
            <section class="page" id="pg3">
                <div id="pg3-two">
                    <div id="pg3-lt">
                        <div class="pg3-lt-li"><label for="xm">姓名</label><input type="text" id="pg3-lt-xm"></div>
                        <div class="pg3-lt-li"><label for="pe">配额</label><input type="number" id="pg3-lt-pe"></div>
                        <div class="pg3-lt-li">
                            <button id="pg3-lt-qutoaAdd">添加</button>
                        </div>
                    </div>
                    <div id="pg3-rt">
                        <div class="right-th">
                            <div class="right-td"><span>姓名</span></div>
                            <div class="right-td"><span>配额</span></div>
                            <div class="right-td"><span>合计</span></div>
                        </div>
                        <div id="pg3-rt-ul">
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                            <p>l1</p>
                        </div>
                    </div>
                </div>
            </section>

        </main>

    </body>

</html>